<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>闲优购-登录页面</title>
	<link rel="icon" href="img/weblogo.png" >
	<link rel="stylesheet" type="text/css" href="bootstrap-5.1.3-dist/css/bootstrap.min.css"/>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
	<script type="text/javascript" src="js/jquery-3.6.0-min.js"></script>
	<script type="text/javascript" src="bootstrap-5.1.3-dist/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/login.js"></script>
</head>
<body>

		<div class="container mt-5">
			<div class="col-md-6 offset-md-3 order-md-3 shadow bg-light">
				<div class="text-center">
					<img src="img/logo.jpg" style="width: auto; height: 200px">
				</div>
				<h5 class="text-center">
					<i class="bi bi-person-fill"></i>
					登陆页面
				</h5>
			<form id="loginForm" class="text-center">
				<div class="row">
					<label for="un" class="col-md-2 offset-md-1 fs-4">
						用户名</label>
					<div class="col-md-7 order-md-2">
						<input type="text" id = "un" name="username" class="form-control w-100 mb-4"
							   placeholder = "请输入用户名" value="${cookie.get("username").value}">
					</div>

				</div>

				<div class="row">
					<label for="pw" class="col-md-2 offset-md-1 fs-4">密码</label>
					<div class="col-md-7 order-md-2">
						<input type="password" id = "pw" name="password" class="form-control w-100 mb-4" placeholder = "请输入密码" value="${cookie.get("password").value}">
					</div>
				</div>

				<div class="row">
					<label for="ck" class="col-md-2 offset-md-1 fs-4">
						<a href="/code" style="list-style-type: none; color: black">验证码</a>
					</label>
					<div class="col-md-7 order-md-2">
						<input type="text" id = "ck" name="ck" class="form-control w-100" placeholder = "${sessionScope.problem}">
					</div>
				</div>

				<div class="user_error" hidden>输入错误</div>
				<div>
					<input id="re_user" type="checkbox" name="re_user" style="zoom: 180%">
					<label class="fs-4" for="re_user">记住密码</label>
				</div>
				<div class="row mx-auto">
					<div class="mx-auto">
						<button type="button" class="btn btn-dark w-25 mb-4 mx-4">
							<a href="register.html" style="text-decoration: none; color: white;display: block">注册</a>
						</button>
						<button type="button" id="login" class="btn btn-dark w-25 mb-4 mx-4">
							登陆
						</button>
					</div>
				</div>
			</form>
			</div>
		</div>

		<button id="btn-modal-error" type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modal-error" hidden></button>
		<div class="modal fade" id="modal-error" tabindex="-1" aria-labelledby="modal-error" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title text-danger">
							<i class="bi bi-exclamation-triangle-fill"></i>
							温馨提示
						</h5>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body">
						<h5 class="text-warning text-center">
							<i class="bi bi-x-circle"></i>
							<span id="modal-error-info"></span>
						</h5>
					</div>
				</div>
			</div>
		</div>
	<div class="position-absolute top-100 start-50 translate-middle">
		<p>CopyRight © 2021-2022 uni科技有限公司 </p>
	</div>
	
</body>
</html>